<template>
	<view class="container">
		<!-- 顶部插图区 -->
		<view class="illustration-container">
			<image class="illustration" src="/static/images/signin.png" mode="aspectFill"></image>
			<view class="illustration-text">欢迎签到</view>
		</view>
		
		<!-- 签到按钮 -->
		<view class="signin-button-container">
			<button class="signin-button" @click="signIn">
				<text class="signin-icon">●</text>
				<text class="signin-text">立即签到</text>
			</button>
		</view>
		
		<!-- 签到周期 -->
		<view class="streak-container">
			<view class="streak-title">连续签到奖励</view>
			
			<view class="streak-row">
				<view class="streak-day" :class="{ active: currentDay >= 1 }">
					<text class="day-text">第1天</text>
					<text class="reward-text">1张答题卡</text>
					<text v-if="currentDay >= 1" class="check-icon">✓</text>
				</view>
				<view class="streak-day" :class="{ active: currentDay >= 2 }">
					<text class="day-text">第2天</text>
					<text class="reward-text">2张答题卡</text>
					<text v-if="currentDay >= 2" class="check-icon">✓</text>
				</view>
				<view class="streak-day" :class="{ active: currentDay >= 3 }">
					<text class="day-text">第3天</text>
					<text class="reward-text">2张答题卡</text>
					<text v-if="currentDay >= 3" class="check-icon">✓</text>
				</view>
			</view>
			
			<view class="streak-row">
				<view class="streak-day" :class="{ active: currentDay >= 4 }">
					<text class="day-text">第4天</text>
					<text class="reward-text">3张答题卡</text>
					<text v-if="currentDay >= 4" class="check-icon">✓</text>
				</view>
				<view class="streak-day" :class="{ active: currentDay >= 5 }">
					<text class="day-text">第5天</text>
					<text class="reward-text">3张答题卡</text>
					<text v-if="currentDay >= 5" class="check-icon">✓</text>
				</view>
				<view class="streak-day" :class="{ active: currentDay >= 6 }">
					<text class="day-text">第6天</text>
					<text class="reward-text">4张答题卡</text>
					<text v-if="currentDay >= 6" class="check-icon">✓</text>
				</view>
			</view>
			
			<view class="streak-row last-row">
				<view class="streak-day special" :class="{ active: currentDay >= 7 }">
					<text class="day-text special-text">第7天</text>
					<text class="reward-text special-text">10张答题卡</text>
					<text v-if="currentDay >= 7" class="gift-icon">🎁</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDay: 1, // 当前签到天数
				hasSignedToday: false, // 今天是否已签到
				streakRewards: [
					{ day: 1, reward: '1张答题卡' },
					{ day: 2, reward: '2张答题卡' },
					{ day: 3, reward: '2张答题卡' },
					{ day: 4, reward: '3张答题卡' },
					{ day: 5, reward: '3张答题卡' },
					{ day: 6, reward: '4张答题卡' },
					{ day: 7, reward: '10张答题卡' }
				]
			}
		},
		methods: {
			signIn() {
				if (this.hasSignedToday) {
					uni.showToast({
						title: '今日已签到',
						icon: 'none'
					});
					return;
				}
				
				// 执行签到逻辑
				this.hasSignedToday = true;
				
				uni.showToast({
					title: '签到成功',
					icon: 'success'
				});
				
				// 模拟获取奖励
				const reward = this.streakRewards[this.currentDay - 1].reward;
				
				setTimeout(() => {
					uni.showModal({
						title: '签到成功',
						content: `获得${reward}奖励`,
						showCancel: false
					});
				}, 1000);
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(135deg, #67b3ff 0%, #ffffff 100%);
		min-height: 100vh;
		padding: 20rpx;
	}
	
	/* 顶部插图区 */
	.illustration-container {
		display: flex;
		justify-content: center;
		padding: 60rpx 0 40rpx;
		position: relative;
	}
	
	.illustration {
		width: 300rpx;
		height: 300rpx;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
	}
	
	.illustration-text {
		position: absolute;
		bottom: 60rpx;
		background-color: rgba(59, 130, 246, 0.7);
		color: white;
		font-weight: bold;
		font-size: 32rpx;
		padding: 12rpx 24rpx;
		border-radius: 16rpx;
	}
	
	/* 签到按钮 */
	.signin-button-container {
		display: flex;
		justify-content: center;
		margin: 20rpx 0 40rpx;
	}
	
	.signin-button {
		background-color: #3b82f6;
		color: white;
		border-radius: 16rpx;
		padding: 24rpx 80rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
	}
	
	.signin-icon {
		margin-right: 10rpx;
		font-size: 24rpx;
	}
	
	/* 签到周期 */
	.streak-container {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		margin: 0 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.streak-title {
		text-align: center;
		font-weight: 500;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	.streak-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	
	.last-row {
		justify-content: center;
	}
	
	.streak-day {
		border: 2rpx solid #ddd;
		border-radius: 12rpx;
		padding: 12rpx;
		width: 190rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
	}
	
	.streak-day.active {
		background-color: #e6f0ff;
		border-color: #a7c9ff;
	}
	
	.streak-day.special {
		background-color: #fffaeb;
		border-color: #fcd34d;
	}
	
	.day-text {
		font-size: 24rpx;
		color: #333;
	}
	
	.reward-text {
		font-size: 22rpx;
		color: #3b82f6;
		margin-top: 6rpx;
	}
	
	.special-text {
		font-weight: bold;
		color: #f97316;
	}
	
	.check-icon {
		color: #3b82f6;
		margin-top: 6rpx;
		font-size: 28rpx;
	}
	
	.gift-icon {
		margin-top: 6rpx;
		font-size: 28rpx;
	}
</style> 